import React, { Component } from 'react';
import {TransitionGroup, CSSTransition} from 'react-transition-group';

class GroupDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        {
          id: 1,
          text: 'aa'
        },
        {
          id: 2,
          text: 'bb'
        },
        {
          id: 3,
          text: 'cc'
        }
      ]
    }
  }
  fnClick = () => {
    this.setState({
      list: [
        ...this.state.list,
        {
          id: Math.round(Math.random() * 10000),
          text: Math.random()
        }
      ]
    })
  }
  fnRemove = (id) => {
    console.log(id);
    this.setState({ list: this.state.list.filter(item => item.id !== id)});
  }
  render() { 
    return (
      <div>
        {/* list */}
        <button onClick={this.fnClick}>添加</button>
        <ul>
          <TransitionGroup>
          {
            this.state.list.map((item) => (
              <CSSTransition
                key={item.id}
                timeout={500}
                classNames="fade"
              >
                <li style={{padding: 10}}>
                  {item.text}
                  <button onClick={this.fnRemove.bind(this, item.id)}>&times;</button>
                </li>
              </CSSTransition>
            ))
          }
          </TransitionGroup>
        </ul>
      </div>
    );
  }
}
 
export default GroupDemo;